<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .img1 {
      width: 600px;
      height: 200px;
    }

    .h1 {
      color: rgb(255, 255, 255);
      position: absolute;
      top: 0px;
      left: 30px;
    }


    .swiper {
      width: 600px;
      height: 200px;
      position: relative;
      left: -550px;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .w {
      width: 150px;
      height: 130px;
      background-color: rgb(222, 222, 222);
      text-align: center;
      line-height: 80px;
    }

    .w1 {
      display: none;
    }

    .box {
      width: 440px;
      height: 520px;
      background-color: rgb(120, 120, 120);
      position: relative;
      top: -520px;
      left: 150px;
    }

    .sh {
      display: block;
    }

    .img2 {
      width: 300px;
      height: 150px;
      margin-left: 75px;
      margin-top: 20px;
    }

    .w1 button {
      width: 80px;
      height: 30px;
    }

    .ww {
      width: 500px;
      height: 50px;
    }

    .box11 {
      width: 590px;
      height: 50px;
      background-color: antiquewhite;
      position: absolute;
      bottom: -140px;
    }

    .sp {
      position: relative;
      left: 270px;
      font-size: 40px;
    }

    .w1 img {
      width: 300px;
      height: 150px;
      margin-left: 75px;
      margin-top: 20px;
    }
  </style>
</head>

<body>
  <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.VW-t2wVG6DDxowbiUPkmagHaBc?rs=1&pid=ImgDetMain" class="img1">
  <h1 class="h1" onclick="h1()">郑州荥阳吾悦广场店></h1>

  <div class="swiper mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img
          src="https://bpic.588ku.com/element_pic/23/04/23/3c89d11d77a1f75990dd03a4ba160616.png!/fh/350/unsharp/true/format/png"
          alt=""></div>
      <div class="swiper-slide"><img
          src="https://tse4-mm.cn.bing.net/th/id/OIP-C.magS4kmz-V9iK1qRWIDXMQAAAA?rs=1&pid=ImgDetMain" alt=""></div>
      <div class="swiper-slide"><img
          src="https://b2b-jiameng.su.bcebos.com/2022/06/14/b999f4b3372567ca0c4a1618bf1b5e39d67442c3?authorization=bce-auth-v1%2F68bd701e850341f68e6f82b042f89c46%2F2022-06-14T05:26:56Z%2F-1%2Fhost%2F7e81bee0396218931a840286f0239edd971c382bc7911e4f6694c43abd74fc11"
          alt=""></div>
    </div>
    <div class="swiper-pagination"></div>
  </div>

  <div class="w">招牌烤鱼</div>
  <div class="w">专薯虾锅</div>
  <div class="w">特色烧烤</div>
  <div class="w">小吃炸货</div>
  <div class="box">
    <div class="ww"></div>
    <!-- <div class="w1">
      <img src="https://pic.nximg.cn/file/20230217/3885964_184746135120_2.jpg" class="img2">
      <span>烤鱼2</span>
      <div class="ww"></div>
    </div>
    <div class="w1">
      <img src="https://img95.699pic.com/photo/50248/4018.jpg_wh860.jpg" class="img2">
      <span>烤鱼3</span>
      <div class="ww"></div>
    </div>
    <div class="w1">
      <img
        src="https://ts1.cn.mm.bing.net/th/id/R-C.f4df0242d14684c51505637e1d0f22fa?rik=WZSDawr3wO6WaQ&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50079%2f6557.jpg_wh1200.jpg&ehk=zbCZvIfynTsdXurH8ntyEpDngOkq9wrPZFMSjsT6tP8%3d&risl=&pid=ImgRaw&r=0"
        class="img2">
      <div class="ww"></div>
    </div> -->
  </div>
  <div class="box11">
    <span class="sp"></span>
  </div>
  <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
  <!-- Swiper JS -->
  <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"> </script>

  <!-- Initialize Swiper -->
  <script>
    var obj = [{
      id: 1,
      img: 'https://ts1.cn.mm.bing.net/th/id/R-C.a423ca6213189973b0966d852cc3f330?rik=Gy3XAoFWh30zSA&riu=http%3a%2f%2fpic.ntimg.cn%2ffile%2f20190307%2f3529431_083249815088_2.jpg&ehk=QMW24cYbXnTCQmSgf7Me42F49N57q2z3G3sEVdUQ0o0%3d&risl=&pid=ImgRaw&r=0',
      pic: '50',
      name: '烤鱼1',
      num: 1,
    }, {
      id: 2,
      img: 'https://pic.nximg.cn/file/20230217/3885964_184746135120_2.jpg',
      name: '烤鱼2',
      pic: '70',
      num: 1,
    }, {
      id: 3,
      img: 'https://img95.699pic.com/photo/50248/4018.jpg_wh860.jpg',
      pic: '110',
      name: '烤鱼3',
      num: 1,
    }, {
      id: 4,
      img: 'https://ts1.cn.mm.bing.net/th/id/R-C.f4df0242d14684c51505637e1d0f22fa?rik=WZSDawr3wO6WaQ&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50079%2f6557.jpg_wh1200.jpg&ehk=zbCZvIfynTsdXurH8ntyEpDngOkq9wrPZFMSjsT6tP8%3d&risl=&pid=ImgRaw&r=0',
      pic: '20',
      name: '烤鱼4',
      num: 1,
    },]
    var aa = document.querySelector('.ww')
    function fn() {
      obj.forEach(item => {
        // aa.innerHTML = ''
        aa.innerHTML += `
        <div class="w1">
      <img src='${item.img}'
        class="img2"><br>
      <span>${item.name}</span>
      <span>价格:${item.pic}</span>
      <button onclick='add(${item.id})'>+</button>
      <span>${item.num}</span>
      <button onclick='add1(${item.id})'>-</button>
      <button onclick='add2(${item.id})'>添加</button>
    </div>
        `
      })
    }
    fn()
    function add(id) {
      var a = obj.find(item => item.id == id)
      fn()
    }
    function add1(id) {
      var a = obj.find(item => item.id == id)
      if (a.num != 1) {
        a.num--
        fn()
      }
    }
    function add2(id) {
      var jia = 0
      var a = obj.find(item => item.id == id)
      if (a) {
        jia += a.num * a.pic
      }
      $('.sp').html(`￥:${jia}`)
    }
    // var arr = [{
    //   id: 1,
    //   pic: 50,
    //   num: 1
    // }]
    // function fn() {
    //   var as = document.querySelector('.ww')
    //   arr.forEach(item => {
    //     as.innerHTML = ''
    //     as.innerHTML += `
    //         <span>￥：${item.pic}</span>
    // <button onclick='add(${item.id})'>+</button>
    // <span>${item.num}</span>
    // <button onclick='add1(${item.id})'>-</button>
    // <button onclick='add2(${item.id})'>添加</button>
    // `
    //   })
    // }
    // fn()
    function h1() {
      location.assign('./地图.html')
    }
    var swiper = new Swiper(".mySwiper", {
      loop: true,
      autoplay: {
        delay: 3000,
        stopOnLastSlide: false,
        disableOnInteraction: true,
      },
      slidesPerView: 3,
      spaceBetween: 30,
      // pagination: {
      //   el: ".swiper-pagination",
      //   clickable: true,
      // },
    });
    var a = document.querySelectorAll('.w')
    var b = document.querySelectorAll('.w1')
    a.forEach((item, index) => {
      item.addEventListener('click', () => {
        b.forEach(item1 => {
          item1.classList.remove('sh')
        })
        b[index].classList.add('sh')
      })
    })
  </script>
</body>

</html>